<template>
    <div>
        setup语法糖
        <!-- 在模板中使用变量  插值{{ 变量 }}，使用指令 v-text -->
        <div v-text="msg"></div>
        <div>{{ msg }}</div>
        <div>
            <div>姓名：{{ user.name }}</div>
            <div>年龄：{{ user.age }}</div>
        </div>
        <div>
            <ul>
                <li v-for="item in list" :key="item.id">{{ item.name }}</li>
            </ul>
        </div>
        <button @click="submit">提交</button>
        <div>-------reactive------------</div>
        <div>
            {{ news.id }} {{ news.title }}
            <div>
                {{ state.comapny.id }} {{ state.comapny.name }}
            </div>
            <button @click="update">修改reactive</button>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from "vue";
///ref函数
//定义响应式变  ref  在 js使用  变量名.value，在template 使用 :{{变量名}}
//ref 可以定义基本数据类型 也可以定义对象
const msg = ref("hello world");
const user = ref({
    name: "张三",
    age: 18
})
const list = ref([{ id: 1, name: "北京" }, { id: 2, name: "上海" }])

//reactive函数
//使用reactive函数定义响应式变量

let news = reactive({
    id: 1,
    title: "北京欢迎您"

})

const state = reactive({
    comapny: {
        id: 100,
        name: "北京乐柠"
    }
})

console.log("news", news);


const submit = () => {

    msg.value = "你好世界";
    console.log(msg.value);
    user.value.name = "李四"
    list.value.push({ id: 3, name: "广州" })

}

const update = () => {

    // news.id=2;
    // news.title="上海欢迎您";

    // news={id:2,title:"上海欢迎您"};  //错误写法 响应式 丢失

    // Object.assign(news, { id: 2, title: "上海欢迎您" })

    state.comapny={id:200,name:"百度"}

}

</script>

<style></style>